<template>
  <q-layout class="hHh lpR fFf">
    <tool-header title="工具管理">
      <q-btn class="q-ma-sm" @click="handleClick()" color="secondary">上传新简历</q-btn>
      <q-btn type="a" class="q-ma-sm" :href="exportUrl" target="_blank">简历导出 Excel</q-btn>
    </tool-header>
    <!--工具表格-->
    <q-page-container>
      <q-table
          :data="data"
          :columns="columns"
          :table-colspan="pageSize"
          row-key="_id"
          separator="cell"
          :pagination.sync="pagination"
          hide-bottom
          hide-pagination
          :loading="isLoading"
      >
        <template v-slot:body-cell-professional="props">
          <q-td :props="props">
            <string-tag-chip :tag-str="props.value"></string-tag-chip>
          </q-td>
        </template>
        <template v-slot:body-cell-highlights="props">
          <q-td :props="props">
            <string-tag-chip :tag-str="props.value"></string-tag-chip>
          </q-td>
        </template>
        <template v-slot:body-cell-opt="props">
          <q-td :props="props">
            <div class="full-width"></div>
            <q-btn class="q-ma-sm" label="查看数据">
              <q-popup-proxy>
                <q-card class="q-pa-md"
                        style="width: 600px;height: auto">
                  <q-card-section>
                    <div class="text-h6">原始数据</div>
                  </q-card-section>
                  <q-separator inset="6"/>
                  <q-card-section>
                    <json-view :data="props.row"/>
                  </q-card-section>
                </q-card>
              </q-popup-proxy>
            </q-btn>
            <q-btn class="q-ma-sm" @click="handleDelete(props.row)" color="amber">删除</q-btn>
            <q-btn class="q-ma-sm" @click="handleReparse(props.row)" color="primary">重新解析</q-btn>
          </q-td>
        </template>
      </q-table>
    </q-page-container>
    <section class="q-pa-lg flex flex-center">
      <q-pagination
          v-model="pageNo"
          :max="Math.ceil(total/pageSize)"
          :max-pages="6"
          @input="handlePageChange"
      />
    </section>

    <q-dialog v-model="dialogVisible" title="简历上传">
      <q-card>
        <q-card-section>
          <div class="text-h6">简历上传</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          <resume-upload></resume-upload>
        </q-card-section>

        <q-card-actions align="right">
          <q-btn @click="dialogVisible = false">取 消</q-btn>
        </q-card-actions>
      </q-card>
    </q-dialog>
  </q-layout>
</template>

<script>
import ToolHeader from 'pages/ToolMangement/components/ToolHeader'
import iTalent from 'src/api/talent'
import ResumeUpload from 'pages/Talent/components/ResumeUpload'
import StringTagChip from 'pages/Talent/components/StringTagChip'

export default {
  name: 'Resume',
  components: {
    ToolHeader,
    ResumeUpload,
    StringTagChip
  },
  data () {
    return {
      dialogVisible: false,
      pageNo: 1,
      pageSize: 10,
      total: 10,
      isLoading: false,
      pagination: {
        page: 1,
        rowsPerPage: 0
      },
      data: [],
      columns: [
        { name: 'name', label: '姓名', field: 'name', sortable: true, align: 'left' },
        { name: 'phone_number', label: '手机号', field: 'phone_number', sortable: true, align: 'left' },
        { name: 'age', label: '年龄', field: 'age', sortable: true, align: 'left' },
        { name: 'degree', label: '最高学历', field: 'degree', sortable: true, align: 'left' },
        { name: 'desired_position', label: '期望机会.岗位', field: 'desired_position', sortable: true, align: 'left' },
        { name: 'professional_level', label: '级别水平', field: 'professional_level', sortable: true, align: 'left' },
        { name: 'professional', label: '职业标签', field: 'professional', sortable: true, align: 'left' },
        { name: 'highlights', label: '人才标签', field: 'highlights', sortable: true, align: 'left' },
        { name: 'opt', label: '操作', align: 'middle' }
      ],
      exportUrl: iTalent.resumeExportExcel.url
    }
  },
  async activated () {
    await this.initList()
  },
  async mounted () {
    await this.initList()
  },
  methods: {
    async initList () {
      this.isLoading = true
      const { rows, total } = await iTalent.findPages.post({
        offset: (this.pageNo - 1) * this.pageSize,
        limit: this.pageSize
      })
      this.data = rows.map(e => {
        // e.isPublish = !!e.status;
        return e
      })
      this.total = total
      this.isLoading = false
    },
    async handleDelete (tool) {
      this.$q.dialog({
        title: '删除确认',
        message: '确认是否要删除？',
        cancel: true,
        persistent: true
      }).onOk(async () => {
        await iTalent.resumeDeleteById.post({ id: tool._id })
        await this.initList()
      })
    },
    async handleClick () {
      this.dialogVisible = true
    },
    handlePageChange (pageNo) {
      this.pageNo = pageNo
      this.initList()
    },
    async handleReparse () {
      this.$q.notify({
        message: '功能开发中...'
      })
    }
  }
}
</script>
